<template>
    <div class="product-detail">
        <!-- banner -->
         <VideoBanner v-if="detail"
            :video="detail.video"
            :images="detail.cover"
            :has-share-box="false"
            @share="onChangeShareBoxVisible" />

        <!-- 商品信息 -->
        <div v-if="detail && shopDetail" class="header">
            <template v-if="detail.end_time">
                <div class="countBox" v-if="countdownTime">
                    <div class="countBgOneNew color-red">
                        <div class="countBgOne_le">
                            <div style="font-size:22rpx;height: 40rpx;line-height: 60rpx;color:#FD094F;font-weight: bold;">活动价</div>
                            <div style="height: 50rpx;line-height: 50rpx;color:#FD094F;font-weight: bold;">
                                <span class="text-huge">¥</span>
                                <span class="number-huge">{{priceText}}</span>
                            </div>
                        </div>
                        <div class="countBgOne_ri">
                            <span v-if="displayPriceText" class="product-detail__price-item text-small grey-text-color text-through">¥{{displayPriceText}}</span>
                        </div>
                    </div>
                    <!--  -->
                    <!-- <div class="countBgOne color-red">
                        <div class="countBgOne_le">
                            <div style="font-size:22rpx;height: 40rpx;line-height: 60rpx;color:#FD094F;font-weight: bold;">活动价</div>
                            <div style="height: 50rpx;line-height: 50rpx;color:#FD094F;font-weight: bold;">
                                <span class="text-huge">¥</span>
                                <span class="number-huge">{{priceText}}</span>
                            </div>
                        </div>
                        <div class="countBgOne_ri">
                            <span v-if="displayPriceText" class="product-detail__price-item text-small grey-text-color text-through">¥{{displayPriceText}}</span>
                        </div>
                        
                    </div> -->
                    <!-- <div class="countBgTwo"></div> -->
                    <div class="countBgThree"></div>
                    <div class="countdownright" style="color:#fff;">
                        <div style="font-size:26rpx;">活动结束倒计时</div>
                        <!-- <van-count-down class="product-detail__countdown" style="color：#fff;" :time="countdownTime" :auto-start="true" format="HH： mm： ss"/> -->
                        <van-count-down :time="countdownTime" style="margin-top: 6rpx;">
                        <template #default="timeData">
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.days  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">天</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.hours > 9? timeData.hours : '0' + timeData.hours  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">:</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.minutes > 9? timeData.minutes : '0' + timeData.minutes  }}</span>
                            <span style="color:#fff;font-size: 10px;font-weight: bold;padding-right:4rpx;">:</span>
                            <span style="padding：4rpx;background-color:#fff;color:#f4051a;padding: 3rpx 6rpx;border-radius: 10rpx;">{{ timeData.seconds > 9? timeData.seconds : '0' + timeData.seconds }}</span>
                        </template>
                        </van-count-down>
                    </div>
                </div>

                <!-- <div v-if="countdownTime" class="product-detail__countdown-wrap" style="color:#fff;">
                    活动结束倒计时
                    <van-count-down class="product-detail__countdown" :time="countdownTime" :auto-start="true" format="HH时 mm分 ss秒"/>
                </div> -->
                <div v-else class="countBox" style="color:#fff;padding-left:30rpx;line-height:150rpx;">
                    限时活动已结束
                </div>
            </template>

            <div class="good-info">
                <div class="title">
                    <span v-if="detail.tag" class="font-bold text-tiny gold-label">{{detail.tag}}</span>
                    <span class="font-bold text-giant">{{detail.name}}</span>
                    <span class="text-tiny store-name grey-text-color">{{shopDetail.type}}·{{shopDetail.name}}</span>
                </div>
                <div class="clearfix">
                    <div v-if="showCopyButton" class="product-detail__price-copy-btn" @click="onClickCopyBtn">复制分享</div>
                    <div class="product-detail__price">
                        <span class="color-font-red">
                            <span class="text-huge">¥</span>
                            <span class="number-huge">{{priceText}}</span>
                        </span>
                        <span v-if="displayPriceText" class="product-detail__price-item text-small grey-text-color text-through">¥{{displayPriceText}}</span>
                        <span v-if="rebateRange" class="product-detail__price-item">{{rebateLabel}} <span class="color-red">￥{{rebateRange}}</span></span>
                        <span class="product-detail__price-item text-small grey-color">销量 {{detail.sales_volume}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 优惠 -->
        <div v-if="showDiscount" class="separation"></div>
        <ProductDiscount v-if="showDiscount" :price="price" :productId="productId" />

        <!-- 服务 -->
        <div v-if="getServiceList.length > 0" class="separation"></div>
        <div class="serviceBox" v-if="getServiceList.length > 0" style="padding: 9px 24rpx 0rpx 22px;" @click="openService" >
            <div class="serviceBox_tit">服务</div>
            <div class="serviceBox_con">
                <template v-for="(item,index) in getServiceList">
                    <div class="serviceBox_con_item"  :key="index" v-if="index < 3">
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                        <div>{{item.name}}</div>
                    </div>
                </template>
                
                <!-- <div class="serviceBox_con_item">
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                    <div>无忧售后</div>
                </div>
                <div class="serviceBox_con_item">
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/yesRight_icon.png" class="serviceBox_con_item_img" alt="">
                    <div>急速退款</div>
                </div> -->
            </div>
            <div class="discount_lump_icon">
                <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
            </div>
        </div>

        <!-- 规格选择 -->
        <div class="separation"></div>
        <ListInfoItem :label="specLabel" @click="onClickSpec" />

        <!-- 评价 -->
        <div v-if="commentCount && commentCount.count > 0" class="separation"></div>
        <div v-if="commentCount && commentCount.count > 0" class="evaluation">
            <div class="title" @click="onClickComments">
                <div class="text-large font-bold">
                    用户评价（{{commentCount.count}}）
                </div>
                <div class="text-normal">
                    <span>好评率{{commentCount.favorable}}%</span>
                    <span class="icon">&#xe770;</span>
                </div>
            </div>
            <CommentItem v-for="(comment, index) in comments"
                :key="index"
                :avatar="comment.avatar"
                :name="comment.nickname"
                :rate="comment.score"
                :content="comment.content"
                :date="comment.created_at"
                :images="comment.image" />
            <div class="watch-more text-center text-normal blue-color" @click="onClickComments">
                查看全部评价
            </div>
        </div>

        <!-- 店铺信息 -->
        <div v-if="shopDetail" class="separation"></div>
        <ShopInfoBar v-if="shopDetail"
            :isPhotography="false"
            :cover="shopDetail.cover"
            :name="shopDetail.name"
            :tag="shopDetail.tag"
            :good="shopDetail.goods_number"
            :visitor-number="shopDetail.visitor"
            :phone="shopDetail.phone"
            @click="onClickShop" />

        <!-- 店铺推荐 -->
        <div v-if="recommendList.length > 0" class="store-recommend">
            <div class="title text-normal">店铺推荐</div>
            <div class="inner">
                <PkgRecommendItem v-for="(item, index) in recommendList"
                    :key="index"
                    :cover="item.cover"
                    :name="item.name"
                    :price="item.price"
                    :original-price="item.price"
                    @click="onClickRecommend(item)" />
            </div>
        </div>

        <!-- 详情 -->
        <LineTitle v-if="detail" value="商品详情" :has-pad="true" :container-class="['bg-default']" :line-class="['color-font-4']" />
        <div v-if="detail" class="detail-description text-small">
            <RichText :content="description"></RichText>
        </div>
        <!-- 分享按钮 --> 
        <div class="fixed-center" v-if="shareBoxVisible"  @click="onShowshareBoxVisible">
            <div class="share-box" @click="onChangeShareBoxVisible">
                <wx-button open-type="share" class="item share">
                    <img mode="aspectFill" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/message.jpg" />
                    <div class="text-normal font-bold">好友/群</div>
                </wx-button>
                <button class="item" @click="showTimeline">
                    <img mode="aspectFill" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/timeline.jpg" />
                    <div class="text-normal font-bold">发朋友圈</div>
                </button>
            </div>
        </div>
        <!-- 底部内容 -->
        <div class="fixed-bottom">
            <div class="btn-box">
                <div class="price">
                    <span class="text-small">总计：</span>
                    <span class="text-huge color-red">¥{{payPriceText}}</span>
                </div>
                <MobileButton name="white-yellow" class="btn-large btn-rect" :is-disabled="detail.status != 'on'" @click="onClickAddCart">加入购物车</MobileButton>
                <MobileButton name="white-red" class="btn-large btn-rect" :is-disabled="detail.status != 'on'" @click="onClickConfirm">{{detail.status === 'on' ? '提交订单' : '商品下架'}}</MobileButton>
            </div>
        </div>

        <div class="share-btn" @click.stop="onChangeShareBoxVisible">
            推荐好友
        </div>
        <!-- 购物车弹窗 -->
        <CartButton :container-class="['br-cart-button']" @click="onClickCart" />

        <!-- 规格弹窗 -->
        <SpecPopup v-if="specVisible"
            :product-detail="detail"
            :spec-id="selectSpecId"
            :count-visible="true"
            :count="count"
            @close="onCloseSpecPopup"
            @select="onClickSelect">
        </SpecPopup>

        <!-- 服务弹窗 -->
        <ServicePopup v-if="serviceVisible"
            :detail="getServiceList"
            :service-id="1"
            :count-visible="true"
            @close="onCloseservicePopup"
            @toSpecDetail="toSpecDetail">
        </ServicePopup>
    </div>
</template>

<script lang="ts">
import {
    formatPrice,
    currency,
    is,
    formatRichText,
    objScene,
    dateParse,
    mathMax,
    mathMin,
    dateNow,
    isUndef,
} from '@/lib/utils';
import {
    api,
} from '@/lib/api';
import {
    ROUTE_NAME,
    STATUS_LOGIN_LOGINED,
} from '@/lib/constant';
import store from '@/store';
import CommentItem from '@/features/comment/commentItem.vue';
import VideoBanner from '@/components/common/videoBanner.vue';
import PkgRecommendItem from '@/features/pkg/recommendItem.vue';
import ShopInfoBar from '@/features/shop/infoBar.vue';
import LineTitle from '@/components/common/lineTitle.vue';
import SpecPopup from '@/features/good/specPopup.vue';
import ListInfoItem from '@/components/list/infoItem.vue';
import CartButton from '@/features/shop/cartButton.vue';
import ProductDiscount from '@/module/product/components/discount.vue';

import ServicePopup from '@/features/good/servicePopup.vue';

import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
]);

@Component({
    name: 'ProductDetail',
    components: {
        CommentItem,
        VideoBanner,
        PkgRecommendItem,
        ShopInfoBar,
        LineTitle,
        SpecPopup,
        ListInfoItem,
        CartButton,
        ProductDiscount,

        ServicePopup,
    },
})
export default class ProductDetail extends Vue {
    public countdownTime: number | null = null;
    public current: any = 0;
    public activeType: any = 'img';
    public activeTab: any = 'service';

    /** 规格弹窗类型 */
    public specType: any = '';

    /** 规格弹窗是否可见 */
    public specVisible: any = false;

    /** 选择的规格id */
    public selectSpecId: any = null;

    /** 数量 */
    public count: any = 1;

    public shareBoxVisible: any = false;

    public serviceVisible: any = false; // 服务弹窗

    public openService(){
        this.serviceVisible = true;
    }
    public onCloseservicePopup (){
        this.serviceVisible = false;
    }

    // 获取服务列表
    public get getServiceList(){
        var key = this.productId + '_';
        return this.productId && store.state.shop.servierPopupList[key] ? store.state.shop.servierPopupList[key] : [];
    }

    public get scene() {
        return store.state.utils.scene;
    }
    /** 商品id */
    public get productId() {
        return this.scene && this.scene.good_id ? this.scene.good_id : this.$route.params.productId;
    }
    public get referrer() {
        return this.$route.query.referrer;
    }
    /** 是否来自于分享 */
    public get isFromShare() {
        return this.scene && this.scene.id ? true : !!this.referrer;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get hasLogin() {
        return store.state.auth.hasLogin;
    }
    public get goodsCouponList() {
        return store.state.user.goodsCouponList;
    }
    /** 店铺详情 */
    public get shopDetailMap() {
        return store.state.shop.shopDetailMap;
    }
    /** 店铺推荐 */
    public get shopRecommendListMap() {
        return store.state.shop.shopRecommendListMap;
    }
    public get productMap() {
        return store.state.good.productMap;
    }
    public get posterMap() {
        return store.state.good.posterMap;
    }
    /** 规格信息 */
    public get spec() {
        return store.state.good.spec;
    }
    /** 评价 */
    public get commentsMap() {
        return store.state.good.comments;
    }
    /** 评价数量 */
    public get commentCountMap() {
        return store.state.good.commentCount;
    }
    public get isIPhoneXSeries() {
        return store.state;
    }
    // 优惠信息
    public get goodsCoupon() {
        const key = `product_${this.productId}_${this.shopId}`;
        return this.goodsCouponList[key] ? this.goodsCouponList[key].map((item: any) => {
            return Object.assign(item, {
                price_limit: currency(item.price_limit),
                money: currency(item.money),
            });
        }) : [];
    }
    /** 商品详情 */
    public get detail() {
        return store.state.good.productDetailMap[this.productId];
    }
    /** 门店id */
    public get shopId() {
        return this.detail.shop_id;
    }
    public get description() {
        return this.detail && this.detail.description ? formatRichText(this.detail.description) : '';
    }
    public get poster() {
        return this.productId && this.posterMap[this.productId] ? this.posterMap[this.productId] : null;
    }
    /** 门店信息 */
    public get shopDetail() {
        return this.shopDetailMap[this.shopId] || null;
    }
    /** 评价数据 */
    public get comments() {
        const wrap = this.commentsMap[this.productId] || {
            list: [],
            loaded: false,
            req: false,
        };
        return wrap.list.slice(0, 1);
    }
    /** 评价数量 */
    public get commentCount() {
        return this.commentCountMap[this.productId] ? {
            count: this.commentCountMap[this.productId].count,
            favorable: Math.floor(this.commentCountMap[this.productId].favorable / this.commentCountMap[this.productId].count * 100),
        } : {
            count: '-',
            favorable: '-',
        };
    }
    /** 推荐列表 */
    public get recommendList() {
        return this.shopId && this.shopRecommendListMap[this.shopId] ? this.shopRecommendListMap[this.shopId].slice(0, 4) : [];
    }
    public get price() {
        return this.detail ? this.detail.getPrice(this.selectSpec ? this.selectSpec.id : null) : null;
    }
    /** 价格 */
    public get priceText() {
        return this.price ? formatPrice(this.price) : '-';
    }
    /** 显示价格 */
    public get displayPriceText() {
        return this.detail ? currency(this.detail.display_price) : '-';
    }
    /** 最终支付价格 */
    public get payPriceText() {
        return this.selectSpec ? currency(this.priceText * this.count * 100) : 0;
    }
    /** 选择的规格 */
    public get selectSpec() {
        return this.spec[this.selectSpecId];
    }
    /** 选中的规格信息 */
    public get specLabel() {
        // 处理规格重复显示
        let selectSpecParam = '';
        if(this.selectSpecId){
            for(let i in this.selectSpec.param){
                if(i.indexOf('attr') != -1){
                    selectSpecParam = selectSpecParam + ' ' + this.selectSpec.param[i];
                }
            }
        }
        return this.selectSpecId ? '' + selectSpecParam : '';
        // return this.selectSpecId ? '已选择:' + selectSpecParam : '规格';
        // return this.selectSpecId ? '已选择:' + Object.values(this.selectSpec.param).join(' ') : '选择规格';
    }
    /** 购物车信息 */
    public get cart() {
        return store.state.shop.cart || {};
    }
    /** 是否显示复制按钮 */
    public get showCopyButton() {
        if (this.userBasicInfo.level <= 0) {
            return false;
        } else if (this.userBasicInfo.level > 1) {
            return true;
        } else {
            const list = store.state.user.memberShopList;
            return list.find((item) => item.shop_id === this.detail.shop_id);
        }
    }
    public get rebateLabel() {
        const list = [
            '返利',
            '推荐返还',
            '推荐分红',
            '推荐提成',
        ];
        return this.userBasicInfo ? list[this.userBasicInfo.level] : '';
    }
    /** 返利范围 */
    public get rebateRange() {
        const basicInfo = this.userBasicInfo;
        if (!basicInfo || !this.detail) {
            return null;
        }
        if (basicInfo.level === 1) {
            const shops = store.state.user.memberShopList || [];
            const find = shops.find((shop) => shop.shop_id === this.detail.shop_id);
            if (!find) {
                return null;
            }
        }

        const key = [ this.productId, null, ].join('_');
        const ruleList = store.state.good.rebateRule[key] || [];
        let list = [];
        const level = basicInfo.level;
        if (level === 1) {
            list = ruleList.map((rule) => rule.level1_rebate);
        } else if (level === 2) {
            list = ruleList.map((rule) => rule.level2_rebate);
        } else if (level === 3) {
            this.checkUser()
            // this.IsJiTuan == false  非集团  level4_rebate
            list = ruleList.map((rule) => this.IsJiTuan == true? rule.level3_rebate: rule.level4_rebate);
        }

        return formatPrice({ min: mathMin(list), max: mathMax(list), });
    }
    public IsJiTuan: any = false;
    public async checkUser() {
        const res = await store.dispatch('good/getCheckUser', {
            shop_id: this.detail.shop_id,
            user_id: this.userBasicInfo.id,
        });
        if (res.status == 0) {
            this.IsJiTuan = res.data;
        }

    }
    /** 优惠信息 */
    public get discount() {
        return store.state.good.discount[this.productId] || {
            full_reduction: [],
            discount: [],
            gift: [],
        };
    }
    /** 是否显示discount */
    public get showDiscount() {
        const fullReduction = this.discount.full_reduction;
        const discount = this.discount.discount;
        const gift = this.discount.gift;
        return (fullReduction && fullReduction.length) || (discount && discount.length) || (gift && gift.length);
    }
    public async showTimeline() {
        store.commit('utils/startRequest');
        await store.dispatch('good/getGoodPoster', {
            productId: this.productId,
        });
        store.commit('utils/endRequest');

        store.commit('utils/setImagePopup', {
            visible: true,
            src: this.poster,
        });
    }
    public onChangeShareBoxVisible() {
        this.shareBoxVisible = !this.shareBoxVisible;
    }
    public onShowshareBoxVisible() {
        this.shareBoxVisible = false;
    }

    /**
     * 点击门店信息
     */
    public onClickShop() {
        // api.navigateTo({
        //     url: '/pages/shop_product/main',
        //     query: {
        //         shop_id: this.shopDetail.id,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.SHOP_PRODUCT,
            params: {
                shopId: this.shopDetail.id + '',
            },
        });
    }

    /**
     * 点击规格
     */
    public onClickSpec() {
        this.specType = '';
        this.specVisible = true;
    }

    public onBannerChange(e: any) {
        this.current = e.target.current;
    }

    public onClickBannerType(type: any) {
        this.activeType = type;
    }

    public onClickTab(type: any) {
        this.activeTab = type;
    }

    /**
     * 确认规格
     */
    public onClickSelect(spec: any, count: any) {
        this.selectSpecId = spec.id;
        this.count = count;

        if (this.specType === 'cart') {
            this.onClickAddCart();
        } else if (this.specType === 'buy') {
            this.onClickConfirm();
        }
        this.specType = '';
    }

    /**
     * 点击购物车
     */
    public onClickCart() {
        // api.navigateTo({
        //     url: '/pages/shop_cart/main',
        // });
        api.push({
            name: ROUTE_NAME.SHOP_CART,
        });
    }

    /**
     * 添加购物车
     */
    public async onClickAddCart() {
        if (!this.selectSpecId || !this.count) {
            wx.showToast({
                title: '请选择规格',
                icon: 'none',
            });
            this.specType = 'cart';
            this.specVisible = true;
            return;
        }
        // 找到相同的spec
        let sameItem = null;
        outer:
        for (const key in this.cart) {
            for (const item of this.cart[key]) {
                if (item.spec_id === this.selectSpecId) {
                    sameItem = item;
                    break outer;
                }
            }
        }
        if (sameItem) {
            sameItem.count += this.count;
        } else {
            if (!this.cart[this.shopId]) {
                this.cart[this.shopId] = [];
            }
            this.cart[this.shopId].push({
                product_id: this.productId,
                spec_id: this.selectSpecId,
                count: this.count,
                shopId: this.shopId,
            });
        }
        store.commit('utils/startRequest');
        await store.dispatch('shop/updateCart', {
            cart: this.cart,
        });
        store.commit('utils/endRequest');

        wx.showToast({
            title: '已加入购物车',
            icon: 'none',
        });
    }

    public onClickRecommend(item: any) {
        // api.navigateTo({
        //     url: '/pages/product_detail/main',
        //     query: {
        //         product_id: item.id,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.PRODUCT_DETAIL,
            params: {
                productId: item.id + '',
            },
        });
    }

    /**
     * 确认提交
     */
    public onClickConfirm() {
        if (this.detail.end_time) {
            if (dateNow().valueOf() >= dateParse(this.detail.end_time).valueOf()) {
                wx.showModal({
                    title: '提示',
                    content: '限时活动已结束',
                    showCancel: false,
                });
                return;
            }
        }
        if (this.detail.buy_limit > 0 && this.detail.has_buy >= this.detail.buy_limit) {
            wx.showModal({
                title: '提示',
                content: '您已参与活动，不能再次参与',
                showCancel: false,
            });
            return;
        }

        if (!this.selectSpecId || !this.count) {
            wx.showToast({
                title: '请选择规格',
                icon: 'none',
            });
            this.specType = 'buy';
            this.specVisible = true;
            return;
        }
        store.commit('order/setPendingCart', {
            [this.shopId]: [
                {
                    product_id: this.productId,
                    spec_id: this.selectSpecId,
                    count: this.count,
                },
            ],
        });
        // api.navigateTo({
        //     url: '/pages/product_order/main',
        //     query: {
        //         shop_id: this.shopId + '',
        //     },
        // });
        
        api.push({
            name: ROUTE_NAME.PRODUCT_ORDER,
            params: {
                shopId: this.productId + '',
            },
            query: {
                referrer: this.referrer,
            },
        });
    }

    public onCloseSpecPopup() {
        this.specVisible = false;
    }

    public onClickComments() {
        // api.navigateTo({
        //     url: '/pages/pkg_comments/main',
        //     query: {
        //         good_id: this.productId,
        //         type: 'good',
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_COMMENT,
            params: {
                goodId: this.productId,
                type: 'good',
            },
        });
    }
    /**
     * 点击复制按钮
     */
    public onClickCopyBtn() {
        api.setClipboardData({
            data: this.detail.name,
            success: () => {
                wx.showToast({
                    title: '复制成功',
                });
            },
            fail: () => {
                wx.showToast({
                    title: '复制失败',
                    icon: 'none',
                });
            },
        });
    }
    // 获取商品服务列表数据
    public async getfuwyList() {
        store.commit('utils/startRequest');
        await store.dispatch('shop/getServierPopupList', {
            id:this.productId
        })
        store.commit('utils/endRequest');
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('good/getDetail', {
            productId: to.params.productId,
        });
        store.commit('utils/endRequest');
        next();
    }
    public async created() {
        this.count = 1;
        this.specType = '';
        this.specVisible = false;
        this.shareBoxVisible = false;
        this.selectSpecId = null;

        const endTime = this.detail.end_time;
        if (endTime) {
            const time = dateParse(endTime).valueOf() - Date.now();
            if (time > 0) {
                this.countdownTime = time;
            }
        }

        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('good/getComments', {
                productId: this.productId,
                offset: 0,
                count: 5,
            }),
            store.dispatch('good/getCommentCount', {
                productId: this.productId,
            }),
            store.dispatch('good/addVisitor', {
                id: this.productId,
            }),
            store.dispatch('good/getRebateRule', {
                productId: this.productId,
                specId: null,
            }),
            store.dispatch('shop/getShopDetail', {
                shopId: this.shopId,
            }),
            store.dispatch('good/getDiscount', {
                goodId: this.productId,
                referrer: this.referrer,
            }),
            store.dispatch('user/getMemberShopList', {
                offset: 0,
                count: 1000,
            }),
            store.dispatch('shop/getCart', {}),
            store.dispatch('shop/getShopRecommendList', {
                shopId: this.shopId,
            }),
            // 获取商品服务列表数据
            store.dispatch('shop/getServierPopupList', {
                id:this.productId
            })
        ]);
        store.commit('utils/endRequest');

        window.onShareAppMessage = (res) => {
            store.dispatch('good/addShare', {
                id: this.productId,
            });
            // return {
            //     title: this.detail.name,
            //     imageUrl: this.detail.cover[0],
            //     path: `/pages/product_detail/main?product_id=${this.productId}&referrer_id=${this.userBasicInfo.id}`,
            // };

            const url = this.$router.resolve({
                name: ROUTE_NAME.PRODUCT_DETAIL,
                params: {
                    productId: this.productId,
                },
                query: {
                    referrer: this.userBasicInfo.id + '',
                },
            }).route.fullPath;

            return {
                title: this.detail.name,
                imageUrl: this.detail.cover[0],
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        };

    }
    public beforeDestroy() {
        if (store.state.utils.imagePopup.visible) {
            store.commit('utils/setImagePopup', {
                visible: false,
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.product-detail {
    padding-bottom: 100rpx;

    // 倒计时
    .countBox{
        width: 100%;
        background:linear-gradient(to right,#F42E90,#FD094F);
        position: relative;
        height: 150rpx;
    }
    .countBgOneNew{
        position: absolute;
        top: 30rpx;
        left: 20rpx;
        min-width: 35%;
        // max-width: 45%;
        height: 100rpx;
        line-height: 80rpx;
        border-radius: 10rpx;
        z-index: 1;
        display: flex;
        background: url('https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/activity.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-right: 30rpx;
    }
    .countBgOne{
        position: absolute;
        top: 30rpx;
        left: 20rpx;
        // width: 200rpx;
        width: 337rpx;
        height: 100rpx;
        background-color: #FEEAE9;
        // text-align: center;
        line-height: 80rpx;
        border-radius: 10rpx;
        z-index: 999;
        display: flex;
    }
    .countBgOne_le{
        text-align: center;
        box-sizing: border-box;
        padding-left: 20rpx;
        padding-right: 10rpx;
    }
    .countBgOne_ri{
        box-sizing: border-box;
        padding-top: 42rpx;
    }
    .countBgTwo{
        position: absolute;
        // left: 166rpx;
        left: 300rpx;
        top: 30rpx;
        background: none;
        border-bottom: 100rpx solid #feeae9;
        border-left: 50rpx solid transparent;
        border-right: 50rpx solid transparent;
        height: 0;
        width: 0rpx;
        
    }
    .countBgThree{
        // position: absolute;
        // top: 120rpx;
        // left: 120rpx;
        // width: 80%;
        // height: 10rpx;
        // background-color: #FEEAE9;
        // border-radius: 10rpx;
        
        position: absolute;
        width: 94%;
        top: 0rpx;
        left: 20rpx;
        height: 130rpx;
        background: none;
        border-bottom: 10rpx solid #feeae9;
        box-sizing: border-box;
        border-radius: 10rpx;
    }
    .countdownright{
        position: absolute;
        right: 40rpx;
        top: 30rpx;
        // width: 66%;
            width: 35%;
        height: 80rpx;
        text-align: right;
    }



    // 服务样式
    .serviceBox{
        display: flex;
        justify-content: space-between;

        .serviceBox_tit{
            width: 86rpx;
            height: 80rpx;
            line-height: 70rpx;
            font-size: 28rpx;
            font-weight: bold;
        }
        .serviceBox_con{
            width: 82%;
            height: 80rpx;
            // line-height: 80rpx;
            display: flex;
            padding-top: 10rpx;
            box-sizing: border-box;

            .serviceBox_con_item{
                height: 50rpx;
                line-height: 50rpx;
                font-size: 26rpx;
                display: flex;
                flex-wrap: nowrap;
                margin-right: 20rpx;
            }
            .serviceBox_con_item_img{
                width: 28rpx;
                height: 28rpx;
                margin: 11rpx 10rpx 0rpx 5rpx;
            }
        }
        .discount_lump_icon{
            line-height: 62rpx;
        }
    }

    &__countdown {
        display: inline-block;
        color: @color-red;
        .font-semi();
    }
    &__countdown-wrap {
        padding: 5px 15px;
        color: @color-red;
        .font-semi();
    }

    .good-info {
        padding: 32rpx 26rpx;
        .title {
            .gold-label {
                display: inline-block;
                padding: 0 5px;
                margin-right: 10px;
                border-radius: 10rpx;
                background: #FDDC37;
                box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
                transform: translateY(-10rpx);
            }
            .store-name {
                display: inline-block;
                transform: translate(10rpx,-8rpx);
            }
        }
        .text-through {
            margin-left: 10rpx;
        }
    }

    // 评价
    .evaluation {
        padding: 40rpx 0;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40rpx;
        }
        .watch-more {
            padding: 10px 0;
        }
    }

    .store-recommend {
        padding: 16px;
        .title {
            margin-bottom: 10px;
        }
        .inner {
            margin-right: -24rpx;
            .item {
                display: inline-block;
                width: 167px;
                padding: 10rpx 0;
                margin-right: 10px;
                .img-box {
                    width: 167px;
                    height: 96px;
                    border-radius: 7px;
                    box-shadow: 0px 1*2px 1*2px 0px rgba(0, 0, 0, 0.4);
                    overflow: hidden;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .info-box {
                    .name {
                        height: 64rpx;
                        margin-top: 10px;
                    }
                    .price {
                        display: flex;
                        align-items: center;
                        margin-top: 10rpx;
                        .text-small {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
    .fixed-center {
        position: fixed;
        z-index: 3;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        .share-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-sizing: border-box;
            width: 320px;
            height: 146px;
            // padding: 14rpx 0;
            margin-top: 200px;
            margin-left: 50%;
            transform: translateX(-50%);
            border-radius: 10rpx;
            background-color: @white-color;
            image {
                width: 48px;
                height: 48px;
            }
            .share {
                image {
                    width: 44px;
                    height: 44px;
                }
            }
            .text-normal {
                margin-top: 24rpx;
            }
        }
    }
    .fixed-bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        .share-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 14rpx 0;
            border-radius: 10px 10px 0 0;
            background-color: @white-color;
            image {
                width: 48px;
                height: 48px;
            }
            .share {
                image {
                    width: 44px;
                    height: 44px;
                }
            }
        }
        .btn-box {
            display: flex;
            align-items: stretch;
            .price {
                display: flex;
                flex: 1;
                align-items: center;
                padding: @button-large-padding-v 14px;
                line-height: @button-large-line-height;
                background-color: @color-white;
                box-sizing: border-box;
            }
            .btn {
                width: 116px;
                border-radius: 0;
                text-align: center;
            }
        }
    }
    .share-btn {
        position: fixed;
        top: 60%;
        right: 0;
        padding: 4rpx 10px 4rpx 30rpx;
        border-radius: 10px 0 0 10px;
        font-size: 32rpx;
        color: @color-white;
        background-color: #F35555;
        z-index: 1;
    }

    .grey-color {
        color: #bbbbbb;
    }

    &__price {
        &-item {
            display: inline-block;
            margin-left: 5px;
            padding-top: 9px;
            .text-small();
            vertical-align: top;
        }
        &-copy-btn {
            float: right;
            padding: 9px 0;
            .text-small();
            color: @test-title-color;
            white-space: nowrap;
            text-align: right;
        }
    }
}
</style>
